<script setup>
import { getUserInfoAsync, updateUserInfoAsync } from '@/api/userManagement';
import commonForm from '@/components/commonForm.vue';
import useStore from "@/stores";
const { userStore } = useStore()
const { getUserInfo, setUserInfo } = userStore

//表单配置项
const optionList = ref([
  {
    width: '140',
    data: {
      label: '头像',
      prop: 'avatar',
    },
    component: 'avatarUpload',

  },
  {
    width: '140',
    data: {
      label: '账号',
      prop: 'userName',
    },
    component: 'el-input',
    $attrs: {
      disabled: true
    }
  },
  {
    width: '140',
    data: {
      label: '昵称',
      prop: 'nickName',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入修改的昵称'
    }
  },
  {
    width: '140',
    data: {
      label: '联系方式',
      prop: 'mobile',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入修改的联系方式'
    }
  },

])

//表单回显数据
const optionData = ref({})

//表单校验规则
const optionRuleList = ref({
  nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
  mobile: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) return callback(new Error('请输入用户联系方式'))
        const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if (!reg.test(value)) {
          callback(new Error('请输入正确的联系方式'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  accountState: [{ required: true, message: '请选择用户账号状态', trigger: 'blur' }],
  orderRank: [{ required: true, message: '请输入用户账号序号', trigger: 'blur' }],

})
//表单
const formRef = ref(null)
//变化数据
const formData = ref({})
const updateFormData = (data) => {
  formData.value = data
}

//头像
const avatarFlie = ref('')

//重置恢复表单
const handleReset = () => {
  formRef.value.resetForm()
  optionData.value = {
    ...optionData.value
  }
}

//获取个人信息
const getUserInfoData = async () => {
  try {
    loading.value = true
    const params = {
      id: getUserInfo.id
    }
    const res = await getUserInfoAsync(params)

    console.log('%c [  ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
    if (res && res.code + '' === '200') {
      optionData.value = res.data
      avatarFlie.value = res.data.avatar
      loading.value = false
      setUserInfo(res.data)
    }
  } catch (error) {
    loading.value = false

    console.log('%c [ error ]-145', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}

//更新个人信息
const updateUserInfo = async () => {
  try {
    const params = {
      id: optionData.value.id,
      avatar: avatarFlie.value,
      ...formData.value,
      accountState: 0,
      orderRank: optionData.value.orderRank
    }
    params.password = params.password ? params.password : ''
    const res = await updateUserInfoAsync(params)
    if (res && res.code + '' === '200') {
      getUserInfoData()
      ElMessage.success('成功更新个人信息！')
    } else if (res && res.code + '' !== '200') {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log('%c [ error ]-181', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}

onMounted(() => {
  getUserInfoData()
})

const loading = ref(false)



</script>


<template>
  <div class="user-container">
    <el-card v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>个人信息修改</span>
        </div>
      </template>

      <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
        @updateFormData="updateFormData">
      </commonForm>

      <template #footer>
        <div class="card-footer">
          <el-button class="btn-reset" type="primary" @click="handleReset">
            重置
          </el-button>
          <el-button class="btn-save" type="primary" @click="updateUserInfo">
            保存
          </el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.user-container {
  height: 100%;

  :deep(.el-button) {
    font-size: 16px;
    font-weight: 700;
    width: 100px;
    color: #fff;
    border: 0px;
  }

  :deep(.el-card) {
    width: 500px;

    .card-header {
      text-align: center;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 2px;
      color: #717171
    }

    .card-footer {
      display: flex;
      justify-content: center;



      .btn-reset {
        background-color: #6ca9bb;
        transition: all 0.3s;

        &:hover {
          background-color: #7dd9eb;

        }
      }

      .btn-save {
        background-color: #7dbb6c;
        transition: all 0.3s;

        &:hover {
          background-color: #8fdf3a;
        }
      }

    }
  }

  :deep(.el-input),
  :deep(.el-select),
  :deep(.el-input-number) {
    width: 240px;
  }

  :deep(.form-container) {
    margin: 0 auto
  }

  :deep(.el-avatar) {
    width: 150px;
    height: 100px;
  }
}
</style>